<template>
	<view class="my-box">
		<!-- 个人信息 -->
		<view class="user">
			<view class="avatar" @click="avatarTap">
				<image class='avatar-img' :src="info.avatar_url" alt=""></image>
			</view>
			
			<view class="info">
				<view class="name" @click="maskJudge=true">
					{{info.nickname}}
					<image class="set-name-icon" src="../../static/icon/set-name.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- 今日单量 -->
		<view class="order">
			<view class="box">
				<view class="title">
					今日收入
				</view>
				<view class="num">
					{{info.money}}
				</view>
			</view>
			
			<view class="xian">
		
			</view>
			
			<view class="box" @click='orderTap'>
				<view class="title">
					今日单量
				</view>
				<view class="num">
					{{info.count}}
				</view>
			</view>
		</view>
		
		<view class="menu">
			<view class="my-accout">
				<view class="left">
					<image src="../../static/icon/my-accout.png" mode="aspectFit"></image>
					<text>我的账户</text>
				</view>
				<image src="../../static/icon/list-more.png" mode="aspectFit"></image>
			</view>
			<view class="my-order">
				<view class="left" @click="queryOrder">
					<image src="../../static/icon/my-order.png" mode="aspectFit"></image>
					<text>我的订单</text>
				</view>
				<image src="../../static/icon/list-more.png" mode="aspectFit"></image>
			</view>
			<view class="my-update">
				<view class="left">
					<image src="../../static/icon/my-update.png" mode="aspectFit"></image>
					<text>检查更新</text>
				</view>
				<image src="../../static/icon/list-more.png" mode="aspectFit"></image>
			</view>
			<view class="my-secret">
				<view class="left">
					<image src="../../static/icon/my-secret.png" mode="aspectFit"></image>
					<text>隐私协议</text>
				</view>
				<image src="../../static/icon/list-more.png" mode="aspectFit"></image>
			</view>
			<view class="my-aboutus">
				<view class="left">
					<image src="../../static/icon/my-aboutus.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<image src="../../static/icon/list-more.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="login" @click="login_tap">
			退出登录
		</view>
		
		<!-- 修改用户名 弹窗-->
		<view class="mask" v-if='maskJudge'>
			<view class="box">
				<view class="title">
					修改用户名
				</view>
				<view class="input">
					<input type="text" placeholder="输入新用户名" v-model="name">
				</view>
				<view class="btn" @click="modifyName">
					确认
				</view>
			</view>
			<view class="close" @click="maskJudge=false">
				<image src="../../static/icon/cha.png" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	// 引用公共函数
	import util from '../../utils/util.js'
	export default {
		data() {
			return {
				maskJudge: false,
				info: {
					nickname: "张无忌",
					count:11,
					money:100,
				},
				name:''
			}
		},
		onLoad(){
			var data = {
				usertoken:uni.getStorageSync('usertoken')
			};
			
			util.post('horseman/count',data,(res) => {
				
			})
		},
		methods: {
			//----------------------事件监听函数------------------
			queryOrder:function(event){
				//跳转到历史订单页面
			}
		}
	}
</script>

<style lang="scss">
    .my-box{
		display: flex;
		flex-direction: column;
		
		.user {
			padding-top: 20rpx;
			width: 100%;
			height: 240rpx;
			background: #FF6622;
            display: flex;
			flex-direction: column;
			align-items: center;
			
			.avatar {
				width: 150upx;
				height: 150upx;
				padding: 4upx;
				border-radius: 50%;
				background: #fff;
				
				.avatar-img {
					width: 142upx;
					height: 142upx;
					border-radius: 50%;
				}
			}

			.info {
				color: #fff;
				margin-top: 20rpx;
                display: flex;
                flex-direction: row;
				.name {
					font-size: 32rpx;
					.set-name-icon {
						margin-left:10rpx;
						height: 20rpx;
						width: 20rpx;	
					}
				}
			}
		}
		
		.order{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			
			.box{
				width: 50%;
				border-bottom:1rpx solid #929292;
				
				display: flex;
				flex-direction: column;
				align-items: center;
				.num
				{
					font-size: 48rpx;
					color: #FF6622;
				}
			}
			
			.xian {
				width: 2rpx;
				height: 124rpx;
				background: rgba(0, 0, 0, .28);
			}
		}
		
		.menu{
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
			font-size: 32rpx;
			border-top:1rpx solid #929292;
			border-bottom:1rpx solid #929292;
			// > 表示.menu下[第一级]所有的view标签
			>view{
				border-bottom:1rpx solid #929292;
				margin: 0 10rpx 0 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.left{
					height: 96rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					
					image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}
				
				image{
					width: 24rpx;
					height: 32rpx;
				}
			}
		}
	    
		.login {
			width: 537upx;
			height: 84upx;
			line-height: 84upx;
			text-align: center;
			color: #fff;
			background: #FF6622;
			font-size: 32rpx;
			border-radius: 42upx;
			margin: 217upx auto 0;
		}
		
		.mask {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .48);
			position: fixed;
			top: 0;
			left: 0;

			.box {
				width: 560upx;
				height: 410upx;
				background: #fff;
				position: absolute;
				left: 95upx;
				top: 450upx;

				.title {
					width: 100%;
					text-align: center;
					height: 102upx;
					line-height: 102upx;
					font-size: 32rpx;
					background: #097DCB;
					color: #FFFFFF;
				}

				.input {
					width: 100%;

					margin-top: 50upx;
					height: 80upx;

					input {
						width: 500upx;
						height: 80upx;
						border: 2upx solid #A0A0A0;
						margin: 0 auto;
						padding-left: 30upx;
						box-sizing: border-box;
						border-radius: 10upx;
					}
				}

				.btn {
					position: absolute;
					bottom: 50upx;
					left: 30upx;
					height: 80upx;
					line-height: 80upx;
					width: 500upx;
					text-align: center;
					background: #FF6622;
					color: #fff;
				}
			}

			.close {
				position: absolute;
				left: 353upx;
				top: 884upx;

				image {
					width: 45upx;
					height: 45upx;
				}
			}
		}
		
		// > 表示.menu[第一级]的正数第5个(最后一个)view
		.menu > view:nth-child(5){
			border-bottom:0rpx solid #929292;
		}
	}
	
</style>
